<template>
  <div>
    <el-row style="margin-left:13px;">
      <el-tooltip effect="light" content="目的港账单" placement="top">
        <img v-if="portdestination" :src="portdestination" />
      </el-tooltip>
      <el-tooltip effect="light" content="POD" placement="top">
        <img v-if="tdGreen" :src="tdGreen"/>
      </el-tooltip>
      <el-tooltip effect="light" placement="left">
        <div slot="content">
          <div
            v-html="data['sysRemark']"
            style="max-width:500px;overflow:auto;background: #e1e5e8;font-size: 15px;line-height: 16px;color: #888;max-height: 320px;"
          ></div>
        </div>
        <i
          style="font-size:20px"
          @mouseover="initSysRemark"
          class="el-icon-s-flag"
        ></i>
      </el-tooltip>
    </el-row>
  </div>
</template>


<script>
import waybillloadplan1 from "@/assets/images/pod1.png";
import waybillloadplan2 from "@/assets/images/pod2.png";
import portdestination0Png from "@/assets/images/portdestination0.png";
import portdestination1Png from "@/assets/images/portdestination1.png";


export default {
  props: ["data", "more"],
  data() {
    return {
      tdGreen: waybillloadplan1,
      portdestination:portdestination0Png,
      systemReamrk: "",
      customerRemark: ""
    };
  },
  methods: {
    initShow(
      isPod,
    portOfDestinationBillStatus
    ) {
      if (null != isPod && isPod == 1) {
        this.tdGreen = waybillloadplan1;
      } else {
        this.tdGreen = waybillloadplan2;
      }
      if (
        null != portOfDestinationBillStatus &&
        portOfDestinationBillStatus == 1
      ) {
        this.portdestination = portdestination1Png;
      } else {
        this.portdestination = portdestination0Png;
      }
    },
    initSysRemark() {
      this.sysReamrkData = [];
      var systemReamrks = this.data["sysRemark"];
      if (systemReamrks) {
        var remarks = systemReamrks.split("<br/>");
        remarks.forEach(element => {
          var sysRemark = {};
          sysRemark["remark"] = element;
          this.sysReamrkData.push(sysRemark);
        });
      }
    },
  },
  mounted() {
    this.customerRemark = this.data["customerRemark"];
    const isPod = this.data["isPod"];
    const portOfDestinationBillStatus=this.data["portOfDestinationBillStatus"];
    this.initShow(
      isPod,
      portOfDestinationBillStatus
    )
    if (null != isPod && isPod == 1) {
      this.tdGreen = waybillloadplan2;
    } else {
      this.tdGreen = waybillloadplan1;
    }
    if (null !=portOfDestinationBillStatus && portOfDestinationBillStatus==1){
      this.portdestination=portdestination1Png;
    }else{
      this.portdestination=portdestination0Png;
    }

  }
};
</script>

<style></style>
